Grokking JavaScript Fundamentals
Rate this course
Ask Author
Contribute
Back to course home

0% completed

Vote For New Content
Introduction
Who should take this course?
Course Overview
Introduction to JavaScript
JavaScript Basics
JavaScript - Hello World
JavaScript - Comments
Quiz
JavaScript Variables and Operators
JavaScript - Variables
JavaScript - Operators
Quiz
JavaScript Conditionals
Introduction to Conditional Statements in JavaScript
JavaScript - If...Else
JavaScript - Switch Case
Quiz
JavaScript Objects
Introduction to Objects in JavaScript
JavaScript - Number
JavaScript - Boolean
JavaScript - Math
JavaScript - Date
Quiz
JavaScript - Functions
Introductions to Function in JavaScript
JavaScript - Variable Scope
JavaScript - Default Parameters
JavaScript - Arrow Functions
Quiz
Introduction to Strings in JavaScript
JavaScript - String Methods
Introduction to Array in JavaScript
JavaScript - Array Methods
Quiz
Introduction to loops in JavaScript
JavaScript - for loop
JavaScript - while loop
JavaScript - do-while loop
JavaScript - for-in loop
JavaScript - for-of loop
JavaScript - Loop Control
Quiz
JavaScript - Maps
JavaScript - Sets
Quiz
Where to Go from Here
JavaScript - Default Parameters

Default parameters allow functions to have pre-defined values if no arguments are provided, or if undefined is passed. They simplify function calls and enhance the functionality of functions without the need for additional checks inside the function body.

Why We Need Default Parameters?

In earlier versions of JavaScript, handling missing arguments required additional code inside functions to assign default values. This could lead to verbose and less readable code, especially in functions with multiple parameters. Default parameters address this issue by allowing developers to set default values right in the function signature, making the function easier to use and understand.

Example: Function Without Default Parameters

Initially, handling missing arguments might look something like this:

Javascript

. . . .
  • This example uses a logical OR (||) to provide a default value ('Guest') if name is not provided or is undefined.
  • Calling greet() without an argument defaults to greeting a 'Guest'.

Example: Function With Default Parameters

With ES6 default parameters, the same functionality can be achieved more cleanly:

Javascript

. . . .
  • The function greet now directly assigns a default value ('Guest') to name in the function signature.
  • This makes the code cleaner and the default value assignment more explicit.

Default Parameters with Multiple Arguments

Default parameters are especially useful in functions with multiple parameters, enhancing readability and reducing the amount of code needed for default value assignments.

Example: Multiple Default Parameters

Here, we define a function that requires multiple parameters, each with its own default value.

Javascript

. . . .
  • orderPizza has two parameters, each with a default value: type defaults to 'Cheese', and size defaults to 'Medium'.
  • Calling orderPizza() without arguments uses both default values.
  • Calling orderPizza('Pepperoni') uses the default value for size but overrides the default value for type.

Passing Expressions as Default Parameters

Default parameters in JavaScript functions are not limited to static values; they can also be expressions. When an expression is used as a default parameter, it's evaluated at function call time if the parameter is omitted or undefined. This feature allows for dynamic initialization of function parameters based on runtime conditions or other function calls.

Example: Dynamic Default Parameter with Expression

In this example, we'll create a function that logs a message with a timestamp, using an expression as the default parameter to generate the timestamp dynamically.

Javascript

. . . .
  • function logMessage(message, timestamp = new Date().toLocaleTimeString()) { ... } defines a function logMessage with two parameters: message and timestamp.
    • message is a required parameter for the message to log.
    • timestamp has a default value that is an expression. If timestamp is not provided when the function is called, JavaScript will execute new Date().toLocaleTimeString() to generate a default timestamp.
  • new Date().toLocaleTimeString() generates a string representing the current time according to the locale of the environment running the script. This expression is evaluated each time the function is called without a timestamp argument, ensuring the timestamp reflects the call time.
  • When logMessage("Hello, world!"); is called without a timestamp, the function uses the current time as the default value for timestamp and logs the message with this dynamically generated timestamp.
JavaScript - Variable Scope
JavaScript - Arrow Functions
Mark as Completed

On this page

Why We Need Default Parameters?

Example: Function Without Default Parameters

Example: Function With Default Parameters

Default Parameters with Multiple Arguments

Example: Multiple Default Parameters

Passing Expressions as Default Parameters

Example: Dynamic Default Parameter with Expression